<!-- 创作中心 -->
<template>
<transition name="el-fade-in-linear">
  <div class="transition-box" v-show="show">
    <div class="archive-header pt-50 text-center">
      <div class="container">
        <h2 class="font-weight-900">创 作 中 心</h2>
        <div class="breadcrumb">
          {{docId==0?'新建写作':'正在编辑 ID:'+docId}}
        </div>
        <div class="bt-1 border-color-1 mt-30 mb-50"></div>
        <div class="pagination-area mb-30 mt-20 wow fadeInUp animated">
          <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-start">
              <li class="page-item"><i class="page-link"><i class="elegant-icon arrow_left"></i></i></li>
              <li :class="option==2?'page-item active':'page-item'" @click="select(2)"><i class="page-link">面板</i>
              </li>
              <li :class="option==3?'page-item active':'page-item'" @click="select(3)"><i class="page-link">管理</i>
              </li>
              <li :class="option==4?'page-item active':'page-item'" @click="select(4)"><i class="page-link">标签</i>
              </li>
              <li :class="option==5?'page-item active':'page-item'" @click="select(5)"><i class="page-link">写作</i>
              </li>
              <li :class="option==6?'page-item active':'page-item'" @click="select(6)"><i class="page-link">库</i>
              </li>
              <li class="page-item"><i class="page-link"><i class="elegant-icon arrow_right"></i></i></li>
            </ul>
          </nav>
        </div>
        <echart v-if="option == 2"></echart>
        <div v-if="option == 5">
            <TEditor :docid="docId" ref="tinymceRef"></TEditor>
        </div>
        <data-table v-if="option == 3"></data-table>
        <tags v-if="option == 4"></tags>
      </div>
    </div>
  </div>
</transition>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';
  import Echart from '@/components/module/echart'
  import TEditor from '@/components/module/tinymce'
  import DataTable from '@/components/module/datatable'
  import Tags from '@/components/module/tags'
  import bus from '../utils/bus.js'
  export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
      Echart,
      TEditor,
      DataTable,
      Tags
    },
    data() {
      //这里存放数据
      return {
        show:true,
        option: 2,
        docId:0
      };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
      showMain() {
        // 监听事件
        bus.$on('showMain', res => {
          if (res.name == 'router') {
            this.show = res.data;
            this.$forceUpdate()
          }

        })
      },
      select(o) {
        this.option = o;
        if (o == 6) {
          this.$router.push({name:'cloud',params:{id:1234}});
        }
      },
      
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.showMain();
      $('body').removeClass("canvas-opened");
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  }

</script>
<style>

</style>
